﻿import * as echarts from 'echarts';
import 'echarts-gl';

var ROOT_PATH = 'https://echarts.apache.org/examples';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgData;
var currentImg;
// Configurations
var config = {
    scale: 0.3,
    roughness: 0,
    metalness: 1,
    projection: 'orthographic',
    depthOfField: 4,
    lockY: false,
    move: true,
    sameColor: false,
    color: '#777',
    colorContrast: 1.2,
    lightIntensity: 1,
    lightColor: '#fff',
    lightRotate: 30,
    lightPitch: 40,
    AO: 1.5,
    showEnvironment: false,
    barNumber: 80,
    barBevel: 0.18,
    barSize: 1.2
};
option = {
    tooltip: {},
    backgroundColor: '#000',
    xAxis3D: {
        type: 'value'
    },
    yAxis3D: {
        type: 'value'
    },
    zAxis3D: {
        type: 'value',
        min: 0,
        max: 100
    },
    grid3D: {
        show: false,
        viewControl: {
            projection: 'perspective',
            alpha: 45,
            beta: -45,
            panSensitivity: config.move ? 1 : 0,
            rotateSensitivity: config.lockY ? [1, 0] : 1,
            damping: 0.9,
            distance: 60
        },
        postEffect: {
            enable: true,
            bloom: {
                intensity: 0.2
            },
            screenSpaceAmbientOcclusion: {
                enable: true,
                intensity: 1.5,
                radius: 5,
                quality: 'high'
            },
            screenSpaceReflection: {
                enable: true
            },
            depthOfField: {
                enable: true,
                blurRadius: config.depthOfField,
                fstop: 10,
                focalDistance: 55
            }
        },
        boxDepth: 100,
        boxHeight: 20,
        environment: 'none',
        light: {
            main: {
                shadow: true,
                intensity: 2
            },
            ambientCubemap: {
                texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
                exposure: 2,
                diffuseIntensity: 0.2,
                specularIntensity: 1.5
            }
        }
    }
};
function updateData(pixelData, width, height) {
    console.time('update');
    var data = new Float32Array((pixelData.length / 4) * 3);
    var off = 0;
    for (var i = 0; i < pixelData.length / 4; i++) {
        var r = pixelData[i * 4];
        var g = pixelData[i * 4 + 1];
        var b = pixelData[i * 4 + 2];
        var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
        lum = (lum - 125) * config.scale + 50;
        data[off++] = i % width;
        data[off++] = height - Math.floor(i / width);
        data[off++] = lum;
    }
    myChart.setOption({
        grid3D: {
            boxWidth: (100 / height) * width
        },
        series: [
            {
                animation: false,
                type: 'bar3D',
                shading: 'realistic',
                realisticMaterial: {
                    roughness: config.roughness,
                    metalness: config.metalness
                },
                barSize: config.barSize,
                bevelSize: config.barBevel,
                silent: true,
                dimensions: ['x', 'y', 'z'],
                itemStyle: {
                    color: config.sameColor
                        ? config.color
                        : function (params) {
                            var i = params.dataIndex;
                            var r = pixelData[i * 4] / 255;
                            var g = pixelData[i * 4 + 1] / 255;
                            var b = pixelData[i * 4 + 2] / 255;
                            var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b;
                            r *= lum * config.colorContrast;
                            g *= lum * config.colorContrast;
                            b *= lum * config.colorContrast;
                            return [r, g, b, 1];
                        }
                },
                data: data
            }
        ]
    });
    console.timeEnd('update');
}
function loadImage(img) {
    var height = (canvas.height = Math.min(config.barNumber, img.height));
    var aspect = img.width / img.height;
    var width = (canvas.width = Math.round(height * aspect));
    ctx.drawImage(img, 0, 0, width, height);
    imgData = ctx.getImageData(0, 0, width, height);
    updateData(imgData.data, width, height);
}
// Default
var img = new Image();
img.onload = function () {
    loadImage(img);
    currentImg = img;
};
img.src = ROOT_PATH + '/data-gl/asset/bitcoin.png';

option && myChart.setOption(option);
